<style lang="less" scoped>
    @import './screemchart.less';
</style>
<template>
    <div class="BoxChart">
        <p class="BoxChart_title">
            <label >{{chartconfig[indexID].customReport.name}}</label>
            <Icon type="md-close" class="del" @click="delCharts(chartconfig[indexID].id)" size="20"/>
        </p>
        <!-- chartconfig[indexID].customReport.name -->
        <Chart :key="chartconfig[indexID].customReport.name" v-bind:events="events" v-bind:properties="properties" v-bind:measures="measures" v-bind:chartconfig="chartconfig[indexID]"></Chart>
    </div>
</template>

<script>
import Chart from './ChartCof/ChartCof'
export default {
  props:['chartconfig','dashboardId','projectId','indexID','events','properties','measures'],
  methods: {
    /**
     * @method 删除charts
    */	  
    delCharts(del_id){
        let _that = this;
        this.$axios.delete(this.$api.report +'/dashboard/'+_that.dashboardId[0].id+'/chart/'+del_id,
            {
                headers: {
                    "Authorization": "Bearer "+this.$sessionStore.fetch(),
                    'Content-type': 'application/json'
                },
                params: {
                    projectId:_that.projectId
                }
            }
        )
        .then(function(res){
            _that.$Message.info('删除成功');
            _that.chartconfig.map((item,index)=>{
                if(item.id == del_id){
                    _that.chartconfig.splice(index,1);
                }
                return true; 
            })
        }).catch(function(err){
            console.log(err);
        })
    }
  },
  components:{
      Chart
  }
}
</script>


